<template>
  <div>
    <h2>发送短信验证码</h2>
    <form @submit.prevent="sendCode">
      <label for="phone">手机号：</label>
      <input type="text" v-model="phone" required>
      <button type="submit">发送验证码</button>
    </form>

    <h2>验证短信验证码</h2>
    <form @submit.prevent="verifyCode">
      <label for="code">验证码：</label>
      <input type="text" v-model="code" required>
      <button type="submit">验证</button>
    </form>

    <p v-if="message">{{ message }}</p>  
  </div>
</template>

<script>
export default {
  data() { 
    return {
      phone: '',
      code: '',
      message: '',
    }
  },

  methods: {
    sendCode() {
      // 发送短信验证码
      fetch('http://localhost:3001/api/sendCode', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ phone: this.phone }),
      }).then(res => {
          console.log(res,999999999999999999999999)
        res.json()})
        .then(data => {
          if (!data.success) {
            this.message = '验证码发送成功'
          } else {
            this.message = '验证码发送失败'
          }
        })
        .catch(err => {
          console.error(err)
          this.message = '验证码发送失败'
        })
    },

    verifyCode() {
      // 验证短信验证码
      fetch('http://localhost:3001/api/verifyCode', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json', 
        },
        body: JSON.stringify({ phone: this.phone, code: this.code }),
      })
        .then(res =>{
        console.log(888888888888888,res)
        res.json(
        )})
        .then(data => {
          console.log(data,11111111111)
          if (data.success) {
            this.message = '验证码验证成功'
          } else {
            this.message = '验证码验证失败'
          }
        })
        .catch(err => {
          console.error(err)
          this.message = '验证码验证失败'
        })
    },
  },
}
</script>
